import { memo } from "react";
import { Select } from "antd";
import Course_search_type from "./style";
import { useFetch_getCourses_sample } from "../../../../service/course";
import { debounce } from "lodash-es";

const Course_search = memo(
  ({ onSelected }: { onSelected: (value: string) => void }) => {
    const { data, loading, getCourses } = useFetch_getCourses_sample();
    const searchHandler = debounce((value: string) => {
      getCourses(value);
    }, 500);
    const onChangeHandler = (value: string) => {
      onSelected(value);
    };
    return (
      <Course_search_type>
        <Select
          showSearch
          placeholder="请搜索课程"
          onSearch={searchHandler}
          onChange={onChangeHandler}
          filterOption={false}
          loading={loading}
          style={{ width: "15vw" }}
        >
          {data?.map((item) => {
            return (
              <Select.Option key={item.id} value={item.id}>
                {item.name}
              </Select.Option>
            );
          })}
        </Select>
      </Course_search_type>
    );
  }
);

export default Course_search;
